<template>
	<view class="contents">
		<!-- 钱包总额 -->
		<view class="qbtop">
			<view class="qbtpflex">
				<view class="wzdc">
					我的资产（元）
				</view>

				<view class="szmx" @click="szmxxq()">
					收支明细 <u-icon name="arrow-right" size="10" color="#ffffff"></u-icon>
				</view>
			</view>
			<!-- 钱包金额 -->
			<view class="qbje">
				{{ showMoney ? userInfo.money || '0.00' : '*****' }}
			</view>
		</view>
		<!-- 充值选择 -->
		<view class="czxz" v-if="initRecharge.moneys.length">
			<view class="czxz1">
				<text>充值</text>
				<text>线上充值线下门店也可以使用</text>
			</view>
			<!-- 充值金额 -->
			<view class="czje">
				<view v-for="(item,index) in  initRecharge.moneys" @click="selectCard(index)" :class="actives==index?'activesd':''"
					:key="index">
					充值{{item.money}}元
				</view>
				<view class="" @click="selectCard(6)" :class="actives==6?'activesd':''" style="display: flex;align-items: center;">
					<input placeholder="自定义金额" type="digit" v-model="price" />
				</view>
			</view>
			<!-- 确认充值 -->
			<view class="qrcz" @tap="confirmTopup">
				充值
			</view>
		</view>
	</view>
</template>

<script>
		import { mapState, mapActions, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				isEmpty: false,
				showMoney: true,
				curMoneyCard: '',
				actives: -1,
				money:'',
				moneys:'',//钱包金额
				price:''
			}
		},
		onLoad() {
			// this.getwallet()
			// this.money = this.initRecharge.moneys[0].money
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'initRecharge'])
		},
		onShow() {
			this.isLogin && this.getUserInfo();
		},
		methods: {
			...mapActions(['getUserInfo']),
			activess(index) {
				let _this = this
				_this.actives = index
			},
			// 跳转收支详情
			szmxxq() {
				uni.navigateTo({
					url: "./wallet_xq"
				})
			},
			// 选择充值卡片
			selectCard(index) {
				let _this = this
				_this.actives = index
				if(index != 6){
					this.curMoneyCard = index
					this.money = this.initRecharge.moneys[index].money
				}
			},
			// 获取用户(钱包)信息
			getwallet(){
				let _this =this
				uni.$u.http.get('/addons/shopro/user').then(res =>{
					console.log("获取钱包信息")
					console.log(res)
					_this.moneys=res.money
				})
			},
			confirmTopup() {
				const that = this;
				if(this.actives == 6){
					this.money = this.price
				}
				if (this.money <= 0) {
					this.$u.toast('请选择或输入充值金额');
					return;
				}
				that.$http(
					'money.recharge', {
						recharge_money: that.money
					},
					'确认中...'
				).then(res => {
					if (res.code === 1) {
						that.price = ''
						// that.money = '';
						that.$Router.push({
							path: `/pages/order/payment/method`,
							query: {
								orderId: res.data.id,
								orderType: 'recharge'
							}
						});
					} else {
						that.$u.toast(res.msg);
					}
				});
			},
			

		}
	}
</script>

<style scoped>
	.contents {
		padding: 20rpx;
	}

	.qbtop {
		background: linear-gradient(90deg, #FFCB6B 0%, #FFEAAF 100%);
		border-radius: 10rpx;
		margin: 20rpx 0;
		padding: 29rpx 0 100rpx 29rpx;
	}

	.qbtpflex {
		display: flex;
		justify-content: space-between;
		margin-bottom: 60rpx;
	}

	.wzdc {
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.szmx {
		display: flex;
		justify-content: center;
		width: 152rpx;
		height: 46rpx;
		line-height: 46rpx;
		background: linear-gradient(90deg, #FFCB6C 0%, #FFE9AE 100%);
		box-shadow: 0rpx 2rpx 2rpx 0rpx rgba(122, 123, 127, 0.35);
		border-radius: 23rpx 0rpx 0rpx 23rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.qbje {
		font-size: 50rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.czxz {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 52rpx 21rpx 40rpx;
		min-height: 70vh;
	}

	.czxz1 {
		margin-bottom: 50rpx;
	}

	.czxz1>text:first-of-type {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-right: 36rpx;
	}

	.czxz1>text:last-of-type {
		font-size: 26rpx;
		font-weight: 400;
		color: #FF9A33;
	}

	.czje {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.czje>view {
		width: 210rpx;
		height: 100rpx;
		margin-bottom: 40rpx;
		background: #FAFAFA;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: 800;
		color: #7C7C7C;
		text-align: center;
		line-height: 100rpx;
	}

	.activesd {
		background: #FFF9F1 !important;
		border: 1rpx solid #FF9A33;
		border-radius: 10rpx;
		font-weight: 800 !important;
		color: #FF9A33 !important;

	}

	.qrcz {

		width: 500rpx;
		height: 70rpx;
		background: #FF9A33;
		border-radius: 30rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 170rpx auto 0;
	}
</style>
